<template>
	<view>
		<!-- <map class="map-style" :latitude="latitude" :longitude="longitude"></map> -->
		<view class="m-25">
			<u-swiper :list="swiper" :height="260"></u-swiper>
		</view>
		<view class="content">
			<view class="w-700 br-20 b_bai m-l-25 m-r-25">
				<!-- <view class="p-25 d_flex d_flex_items_center borderB">
					<u-icon name="map-fill" color="#0055fe" size="45"></u-icon>
					<text class="p-l-25 f-24">{{address}}</text>
				</view> -->
				<click-input :title="'工作开始日期'" :right="info.starTimeText" @btnClick="selects.show1 = true"></click-input>
				<click-input :title="'工作结束日期'" :right="info.endTimeText" @btnClick="selects.show2 = true"></click-input>
				<click-input :title="'车型'" :right="info.carTypeText" @btnClick="selects.show3 = true"></click-input>
				<click-input :title="'取车位置'" :right="info.address" @btnClick="selectLocation(true)"></click-input>
				<click-input :title="'施工地点'" :right="info.construction" @btnClick="selectLocation(false)"></click-input>
				<input-two :title="'订单价格(元)'">
					<input type="number" min="200" max="1000"  placeholder="请输入价格" class="t_r p-r-20" v-model="info.price">
				</input-two>
				<input-two :title="'备注'">
					<input type="text" placeholder="请输入备注" class="t_r p-r-20" v-model="info.desc">
				</input-two>
				<protocol>
					<u-checkbox-group>
						<u-checkbox v-model="checked">
							<view class="p-l-10">
								我已阅读且同意<text class="color-0055fe f-wb">
									《平台协议》
								</text>
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</protocol>
				<view class="p-b-30" @click="sureOrder">
					<view class="btn br-60 w-580 h-80 t_c lh-80 m-l-60">发布订单</view>
				</view>
				<!-- 开始日期选择器 -->
				<u-picker v-model="selects.show1" mode="time" :params="selects.params" @confirm="getStarTime"></u-picker>
				<!-- 结束日期选择器 -->
				<u-picker v-model="selects.show2" mode="time" :params="selects.params"  @confirm="getEndTime"></u-picker>
				<!-- 车型选择器 -->
				<u-select v-model="selects.show3" :list="selects.carList" @confirm="getCar"></u-select>
			</view>
		</view>
	</view>
</template>
<script>
	import clickInput from './components/clickInput.vue'
	import inputTwo from './components/inputTwo.vue'
	import protocol from './components/protocol.vue'
	export default {
		components: {
			clickInput,
			inputTwo,
			protocol
		},
		data() {
			return {
				checked:false,
				swiper: [],
				id: 0,
				title: "map",
				address: "",
				info:{
					starTimeText:"请点击选择日期",
					endTimeText:"请点击选择日期",
					carTypeText:"请点击选择车型",
					carType:"",
					address:"请点击选择取车位置",
					construction:"请点击选择施工地点",
					latitude:"",
					longitude:"",
					price:"",
					desc:""
				},
				selects: {
					show1: false,
					show2: false,
					show3: false,
					params: {
						year: false,
						month: true,
						day: true,
						hour: true,
						minute: true,
						second: false
					},
					carList:[],
				}
			}
		},
		onReady() {
			this.getCarType()
			this.getSwiper()
		},
		methods: {
			async getSwiper(){
				let data = await this.$request.post('/api/common/banner')
				console.log(data)
				this.swiper = data.data.data.product
			},
			getStarTime(e){
				this.info.starTimeText = `${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			getEndTime(e){
				this.info.endTimeText = `${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			getCar(e){
				console.log(e)
				this.info.carTypeText = e[0].label
				this.info.carType = e[0].value
			},
			async getCarType(){
				let res = await this.$request.post('/api/common/carttype')
				console.log('获取车辆',res.data.data)
				let list = res.data.data
				list.forEach(item=>{
					this.selects.carList.push({
						value:item.id,
						label:item.name
					})
				})
			},
			selectLocation(booleans){
				console.log(booleans)
				let _this = this
				uni.chooseLocation({
				    success: function (res) {
						if(booleans){
							_this.info.address = res.name
						}else{
							_this.info.construction = res.name
						}
						_this.info.latitude = res.latitude
						_this.info.longitude = res.longitude
				    }
				});
			},
			verification(){
				if(!this.info.address || this.info.address == '请点击选择取车位置' || this.info.construction == '请点击选择施工地点' || (!this.info.latitude) || (!this.info.longitude)){
					uni.showToast({
						title:"请选择正确的取车位置",
						icon:"none"
					})
					return
				}
			
				
				if(this.info.starTimeText == '请点击选择日期' || this.info.endTimeText == '请点击选择日期'){
					uni.showToast({
						title:"请正确选择工作日期",
						icon:"none"
					})
					return
				}
				if(this.info.carTypeText == '请点击选择车型'){
					uni.showToast({
						title:"请选择车型",
						icon:"none"
					})
					return
				}
				if(!this.info.price){
					uni.showToast({
						title:"请输入订单价格",
						icon:"none"
					})
					return
				}
				if(this.info.price > 1000 && this.info.price < 200  ){
					uni.showToast({
						title:"订单价格不能小于200元,大于1000元",
						icon:"none"
					})
					return
				}
				console.log(this.info.starTimeText)
				console.log(this.info.endTimeText)  
				var starTimeText = new Date(this.info.starTimeText) 
				var starTimeTextstamp = Date.parse(starTimeText) / 1000
				 var endTimeText = new Date(this.info.endTimeText) 
				var endTimeTextstamp = Date.parse(endTimeText) / 1000 
						
					if(endTimeTextstamp < starTimeTextstamp){
						uni.showToast({
							title:"开始时间不能小于结束时间",
							icon:"none"
						})		
					}
					
						
					if( endTimeTextstamp - starTimeTextstamp > 86400000 ){ 
					uni.showToast({
						title:"工作时间不能大于12小时",
						icon:"none"
					})		
						
					return	
					}
				 
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			},
			async sureOrder(){ 
				var starTimeText = new Date(this.info.starTimeText)
				var starTimeTextstamp = Date.parse(starTimeText) / 1000
				 var endTimeText = new Date(this.info.endTimeText) 
				var endTimeTextstamp = Date.parse(endTimeText) / 1000 	 
				console.log(starTimeTextstamp)
				console.log(endTimeTextstamp)
				console.log(endTimeTextstamp -  starTimeTextstamp)
				if(!this.checked){
					uni.showToast({
						title:"请先阅读并同意《平台协议》",
						icon:"none"
					})
					return
				} 
				if(!this.info.address || this.info.address == '请点击选择取车位置' || this.info.construction == '请点击选择施工地点' || (!this.info.latitude) || (!this.info.longitude)){
					uni.showToast({
						title:"请选择正确的取车位置",
						icon:"none"
					})
					return
				}
							
				
				if(this.info.starTimeText == '请点击选择日期' || this.info.endTimeText == '请点击选择日期'){
					uni.showToast({
						title:"请正确选择工作日期",
						icon:"none"
					})
					return
				} 
				console.log(endTimeTextstamp < starTimeTextstamp)
				if(endTimeTextstamp < starTimeTextstamp){
					uni.showToast({
						title:"开始时间不能小于结束时间",
						icon:"none"
					})		
					return
				}
				
					
				if( (endTimeTextstamp - starTimeTextstamp) > 86400){ 
					uni.showToast({
						title:"工作时间不能大于12小时",
						icon:"none"
					})		
					
				return	
				}
				if(this.info.carTypeText == '请点击选择车型'){
					uni.showToast({
						title:"请选择车型",
						icon:"none"
					})
					return
				}
				if(!this.info.price){
					uni.showToast({
						title:"请输入订单价格",
						icon:"none"
					})
					return
				}
				if(    this.info.price < 200 || this.info.price > 1000    ){
					uni.showToast({
						title:"订单价格不能小于200元,大于1000元",
						icon:"none"
					})
					return
				}
				
				
					
				 
				
				let data = await this.$request.post('/api/product/createorder',{
					worktimestart:this.info.starTimeText,
					worktimeend:this.info.endTimeText,
					carttype:this.info.carType,
					returnaddress:this.info.address,
					money:this.info.price,
					lat:this.info.latitude,
					lng:this.info.longitude,
					address:this.info.construction
				})
				console.log(data)
				if(data.data.code === 1){
					uni.showToast({
						title:"订单发布成功",
						duration:1500
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/carOwner/myOrder/index"
						})
					},1500)
				}else{
					uni.showToast({
						title:data.data.msg
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	.map-style {
		width: 100%;
		height: 100vh;
	}

	.content {
		.btn {
			background: #0a5aff;
			color: #fff;
		}
	}
</style>
